README (How to easily customize your theme)
===========================================

Many users like to customize their theme. So I made some customizing easier for you. Now it's easy to create your own predefined color, customize title alignment or icon size. Just read the Content, chose one option and start customizing right away. Please keep in mind that each section is written independently of others, so you need not to read all of them if you want to use just one.



*********
Contents:
*********
1. Creating your own predefined color

2. How to align title to the left or right or center and
   using different direction writing

3. How to change button icon size



*************************************
1. Creating your own predefined color
*************************************
Do you want to use your own predefined color of the theme? Do you want to use different color for window border and for GTK+ theme (the inside of a window)? Here you can find the way how to easily do it.

To make your own predefined color you need "City" theme. Just open "metacity-theme-1.xml" file of the theme in a text editor and replace all occurrences of "gtk:bg[SELECTED]" (without quotes) for "yourdesiredcolor" (without quotes) - color is in #RRGGBB format. For example to change window border and title bar color to the red color replace every

gtk:bg[SELECTED]

for

#ff0000

Now save the changes to the file and you're done. Now you have you're own City theme with predefined color.



Note:
-----
This customization applies to this theme only and would not probably work somewhere else. Although it may work in another themes, because "gtk:bg[SELECTED]" is often used for the colors of the themes.





********************************************************
2. How to align title to the left or right or center and
   using different direction writing
********************************************************
It's easy to align title to the left side of a title bar, or to the right or to the center. Everything is already predefined in the source XML and all you need to do is simply change a piece of the source XML. Here is how to do it:



1. choose theme version and open its XML file named "metacity-theme-1.xml" in a text editor.

2. find this string (without quotes): "<!--titles-->"

3. there you can see something like this:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_center_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_center_unfocused"/>
</draw_ops>


4. we are interested in lines with this:

	<include name="title_ltr_center_focused"/>
	
	and this
	
	<include name="title_ltr_center_unfocused"/>

	
5. especially in a value of the "name" attribute, so this:

name="title_ltr_center_focused"
	
	and this
	
name="title_ltr_center_unfocused"

6. as you can see there is one difference between two names and it is a word "focused" (or "unfocused") in the end of the name (the words are separated by underscore). The "focused" word means that the title is used in focused window (or unfocused window in the case of "unfocused" word). We do not need change any of those words. But it is important to know that there are 2 lines in the source XML - one for focused window and one for unfocused window. And we are going to change both lines of the code in the same way.

7. so we see first line looking like this:

name="title_ltr_center_focused"

which means, that the title is centered (look at the word "center"). And we want to change the name, so the title will be aligned to the left side of the title bar. We change only the "center" word to "left". After the change it will look like this:

name="title_ltr_left_focused"

8. and we do the same change to the line for unfocused window so we have next line looking like this:

name="title_ltr_left_unfocused"


9. now the lines look like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_left_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_left_unfocused"/>
</draw_ops>


10. save the changes to the file and it's done. Now the title is aligned to the left side of the title bar.



Now let's align title to the right side. We do the same changes as mentioned above, except that instead of changing the word "center" to "left" we change it to "right", so after the change the lines look like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_right_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_right_unfocused"/>
</draw_ops>


Save changes to the file. Now the title is aligned to the right.



And now let's discuss how to make title to be well displayed when we are using right-to-left direction writing. As you can see there are some 3 letters in the name - "ltr" or "rtl". These letters simply mean that the title is meant to be used for:

"ltr"   left-to-right direction writing languages (such as English, French, Spanish etc.) 

"rtl"   right-to-left direction writing languages (such as Arabic, Persian, Hebrew etc.)


So if you want to use title for right-to-left direction writing, replace the 3 mentioned letters to "rtl". So we have the lines look like these (for alignment to the right):

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_rtl_right_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_rtl_right_unfocused"/>
</draw_ops>


Save changes to the file and it's done. Title is displayed in right-to-left direction writing while aligned to the right.

And what is the difference in rendering (displaying) the left-to-right or right-to-left direction writing titles? Well in most cases you don't see the difference, because windows are often large enough to display whole title. But when you change size of a window that the whole title isn't displayed, then comes the difference between the two variants of direction writing.

The left-to-right direction writing titles (English etc.) in the small window always show the left side of the title (beginning of the title) and hides the right side of the title (the end of the title) - because the window is too small to show the end of the title. The right-to-left direction writing titles (Arabic etc.) do reverse - always show the right side of the title (which is the beginning of the title) and hides the left side of the title (which is the end of the title).



Note:
-----
Please keep in mind that the names are my own predefined names, not Metacity predefined names. So in another themes this section will not work, because the themes would have a different XML code where wouldn't be lines like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_center_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_center_unfocused"/>
</draw_ops>





*********************************
3. How to change button icon size
*********************************
If you wish to change size of the icon inside a button then there is a very easy way how to do it.

Open "metacity-theme-1.xml" file of the theme in a text editor and find this string "<!--Button padding" (without quotes). There you can see this line:

<constant name="Bpad" value="2"/>

This line defines a constant with a name "Bpad" and it's value "2" (or maybe another number). And we are interested in the number. This number is padding between button border and icon. So 2 means that the padding is 2 pixels.

And as you surely guess we need only to change this number to your desired padding. The smaller number it is the bigger icon is inside a button. So if you want to make the padding to 1 pixels then change the number to "1" (without quotes). Now the line look like this:

<constant name="Bpad" value="1"/>

Save changes to the file. Now you have easily changed the button icon size. Now you can experiment with different numbers and watch the changes.



Note:
-----
Please keep in mind that the constant is my own predefined constant so in another themes this section will not work because the themes would have a different XML source code where wouldn't be line like this:

<constant name="Bpad" value="2"/>



*******
The End
*******
